/**
* 获取结果列表
*/
<template>

  <div>
    <!-- 面包屑导航     -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/dataClean/dataCleanTaskLibrary' }">数据清洗库</el-breadcrumb-item>
      <el-breadcrumb-item>数据清洗任务详情</el-breadcrumb-item>
    </el-breadcrumb>
    <div class = "task-detail">


      <div>
      <el-descriptions  :column="2" border>
        <el-descriptions-item label="任务名称" label-class-name="my-label" content-class-name="my-content">{{taskName}}</el-descriptions-item>
        <el-descriptions-item label="数据来源类型"> {{sourceType}}</el-descriptions-item>

      </el-descriptions>
      </div>
      <div style="margin-top: 10px">
        <div><b>数据源信息</b></div>
        <el-table v-show = "showModelResult" size="small" @selection-change="selectChange" :data="res" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="margin-top:20px;width: 100%;">
          <el-table-column align="center" prop="result" label="任务结果" width="999">
          </el-table-column>
        </el-table>

        <el-table v-show = "showStructData" size="small" @selection-change="selectChange" :data="showDataSource" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="margin-top:20px;width: 100%;">
          <el-table-column align="center" prop="result" label="结构化数据源信息" width="999">
          </el-table-column>
        </el-table>

      </div>
      <div style="margin-top: 10px">
        <div><b>存储配置</b></div>
        <el-descriptions  :column="2" border>
          <el-descriptions-item label="存储位置" label-class-name="my-label" content-class-name="my-content">{{storeType}}</el-descriptions-item>
          <el-descriptions-item label="URL"> {{url}}</el-descriptions-item>

        </el-descriptions>
      </div>
      <div style="margin-top: 10px">
        <div><b>任务描述</b></div>
        <div class="text-with-border">
          {{taskDesc}}
        </div>
      </div>
      <div style="margin-top: 10px">
        <div><b>算法配置</b></div>
        <template>
          <el-table :data="jsonArray" border
                    style="width: 100%">
            <el-table-column prop="name" label="算法名称" width="499px"></el-table-column>
            <el-table-column prop="regular" label="正则代码" width="499px"></el-table-column>
          </el-table>
        </template>

      </div>
    </div>
  </div>

</template>

<script>
  // 导入请求方法

  import Pagination from '../../components/Pagination'
  import axios from "axios";
  export default {
    data() {
      return {
       showModelResult:false,   // 显示模型结果
       showStructData:false,   // 显示结构化数据源
       jsonArray:'',
        showDataSource:[],
        size: '',
       url:'',
       storeType:'',
       taskDetail:[],
       taskName:'',
       sourceType:'',
       taskDesc:'',
        sourceId:'',
       config:'',
        loading: false, //是显示加载
        title: '修改结果',
        editFormVisible: false, //控制编辑页面显示与隐藏
        editForm:{
          id: '',
          result:'',
        },
        // 请求数据参数
        formInline: {
          id:this.$route.query.id,
          page: 1,
          limit: 10,
          sourceType:this.$route.query.sourceType

        },
        res:[],
        //任务数据
        taskData:[],

        // 文件内容
        fileContent:[],
        //结果数据
        res:[],
        // 分页参数
        pageparm: {
          currentPage: 1,
          pageSize: 10,
          total: 10
        }
      }
    },
    // 注册组件
    components: {
      Pagination
    },

    /**
     * 创建完毕
     */
    created() {
      this.getSearchPage(this.formInline)


    },

    /**
     * 里面的方法只有被调用才会执行
     */
    methods: {

      // 获取数据方法
      getSearchPage(formInline) {
        this.logining = true
        let url = this.$global.javaUrl + "/dataCleanTask/detail"
        let config = {
          headers:
            {
              //'Content-Type':'application/json',
              'user' : localStorage.getItem('userId')
            },
          params: {
            pageNum:this.formInline.page,
            pageSize:this.formInline.limit,
            id:this.formInline.id

          }
        }
        console.log("id："+this.formInline.id)
        axios.get(url, config).then(response=>{


          this.taskDetail = [{taskName:response.data.data.taskName,
                              sourceType:response.data.data.sourceType,
                              taskDesc:response.data.data.taskDesc,
                              stioreConfigId:response.data.data.stioreConfigId,
                              config:response.data.data.config,
                              sourceId:response.data.data.sourceId
          }]
         this.taskName = response.data.data.taskName
         this.sourceType = response.data.data.sourceType
         this.taskDesc = response.data.data.taskDesc
         this.config = response.data.data.config
         this.sourceId = response.data.data.sourceId
         this.stioreConfigId = response.data.data.stioreConfigId
         this.url = response.data.data.url
          this.storeType = response.data.data.storeType
          this.jsonArray  = JSON.parse(this.config);


         console.log("44"+JSON.stringify(response.data.data))
           const rows = response.data.data;
           const keys = Object.keys(rows);

          for (let i = 0; i < keys.length; i++) {
             console.log(keys[i], rows[keys[i]]);
           }
          if(this.sourceType==='模型任务'){
            this.getModelTaskRes()
            this.showModelResult = true
            this.showStructData = false
          }else{
            this.structDataDetail()
            this.showModelResult = false
            this.showStructData = true
          }
        })


      },
     // 获取模型任务结果
      getModelTaskRes() {
        this.logining = true
        let url = this.$global.javaUrl + "/task/resultPageList"
        let config = {
          headers:
            {
              //'Content-Type':'application/json',
              'user' : localStorage.getItem('userId')
            },
          params: {
            pageNum:this.formInline.page,
            pageSize:this.formInline.limit,
            taskId:this.sourceId
            //isLock: this.formInline.isLock
          }
        }

        axios.get(url, config).then(response=>{

          this.res = []
          this.res = response.data.data.rows

          this.pageparm.total = response.data.data.records
          const rows = response.data.data.rows
          const keys = Object.keys(rows);

          for (let i = 0; i < keys.length; i++) {
            console.log(keys[i], rows[keys[i]]);
          }
        })

      },
      // 获取结构化数据源详情
      structDataDetail(){
        let url = this.$global.javaUrl + "/dataSource/detail"
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data',
            'user' : localStorage.getItem('userId')
          }
        }
        axios.get(url,{
          headers:
            {
              'user' : localStorage.getItem('userId')
            },
          params:
            {
              datasourceId:this.sourceId,
              pageSize:10,
              pageNum:1
            }
        }).then(res=>{
          console.log(res)
          this.showDataSource = res.data.data.mapList
        })
      } ,
      // 分页插件事件
      callFather(parm) {
        this.formInline.page = parm.currentPage
        this.formInline.limit = parm.pageSize
        this.getSearchPage(this.formInline)
      },



      //显示编辑界面
      editResult(id,result) {
        this.editFormVisible = true
        this.title = '修改结果'
        this.editForm.id = id
        this.editForm.result = result

      },
      // 编辑、添加提交方法
      submitForm(editData) {
        let config = {
          headers:
            {
              'Content-Type':'application/json',
              'user' : localStorage.getItem('userId')
            },

        }
        this.$refs[editData].validate(valid => {
          if (valid) {
            // 请求方法
            axios
              .post(this.$global.javaUrl + "/task/updateResult",this.editForm,config)
              .then(res => {
                this.editFormVisible = false
                this.loading = false
                this.pageparm.currentPage = this.formInline.page
                this.pageparm.pageSize = this.formInline.limit
                this.pageparm.total = res.data.data.records
                if (res.data.data != null) {
                  this.$message({
                    type: 'success',
                    message: "数据保存成功！"
                  })
                  this.getSearchPage()
                } else {
                  this.$message({
                    type: 'info',
                    message: res.msg
                  })
                }
              })
              .catch(err => {
                this.editFormVisible = false
                this.loading = false
                this.$message.error('保存失败，请稍后再试！')
              })
          } else {
            return false
          }
        })
      },

      // 关闭编辑、增加弹出框
      closeDialog(dialog) {
        if (dialog == 'edit') {
          this.editFormVisible = false
        } else if (dialog == 'perm') {
          this.dataAccessshow = false
        } else if (dialog == 'unit') {
          this.unitAccessshow = false
        }
      },
    }
  }
</script>

<style scoped>
.user-search{
    margin-top: 20px;
}
.userRole{
    width: 100%;
}
.centered-text{
    text-align: center;
}
.task-detail{
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  margin-top: 40px;
  width: 1000px;
  height: 480px;

}
.text-with-border{
  margin-top: 2px;
  border: 1px ; /* 设置边框样式 */
  padding: 10px;
  background-color: #f3f3f3;
}

</style>

